<template>
    <view v-for="(item, index) in list" :key="index">
        <view class="card" @click="goCourseDetail(item.id)">
            <!-- Header Start -->
            <view class="card--header flex justify-between">
                <view class="text-muted font-xs">{{ item.commentUpdateTime }}</view>
                <view class="flex">
                    <u-rate
                        :count="5"
                        v-model="item.courseScore"
                        size="28"
                        inactive-icon="star-fill"
                        :disabled="true"
                    ></u-rate>
                    <view class="ml-[20rpx] lighter text-xs">
                        <text v-if="item.courseScore == 5">非常好</text>
                        <text v-if="item.courseScore == 4">好</text>
                        <text v-if="item.courseScore == 3">一般</text>
                        <text v-if="item.courseScore == 2">差</text>
                        <text v-if="item.courseScore == 1">非常差</text>
                    </view>
                </view>
            </view>

            <!-- Main Start -->
            <view class="card--main">
                <view class="content">
                    {{ item.comment }}
                </view>

                <view class="grid grid-cols-3 gap-1">
                    <block v-for="(item3, index3) in item.commentImages" :key="index3">
                        <view @click.stop="previewImage(item3)">
                            <u-image :src="item3" width="210" height="210"></u-image>
                        </view>
                    </block>
                </view>

                <view class="course flex">
                    <u-image :src="item.cover" width="198" height="120" borderRadius="10"></u-image>
                    <view class="course-info min-w-0">
                        <view class="course-name text_hidden">{{ item.name }}</view>
                        <price
                            :content="item.sellPrice"
                            mainSize="28rpx"
                            minorSize="22rpx"
                            fontWeight="500"
                        ></price>
                    </view>
                </view>

                <view class="reply normal text-md mt-[20rpx]" v-if="item.reply">
                    <text class="font-normal">商家回复: </text>
                    <text class="break-words">
                        {{ item.reply || '' }}
                    </text>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import Price from '@/components/price/index.vue'

/** Props Start **/
const props = withDefaults(
    defineProps<{
        list: any
    }>(),
    {
        list: []
    }
)
/** Props End **/

/** Methods Start **/
// 去商品详情
const goCourseDetail = (id: number | string) => {
    uni.navigateTo({
        url: `/pages/course_detail/index?id=${id}`
    })
}

// 查看评价图片
const previewImage = (image: string[]) => {
    uni.previewImage({
        current: 0,
        urls: image
    })
}
/** Methods End **/
</script>

<style lang="scss" scoped>
.card {
    border-radius: 14rpx;
    background-color: $color-white;
    margin: 20rpx 20rpx 0 20rpx;
    padding: 30rpx;
    &--header {
        width: 100%;
    }
    &--main {
        .content {
            padding: 20rpx 0;
            font-size: $font-size-md;
            color: $color-text-deep;
        }
        .course {
            margin-top: 20rpx;
            border-radius: $border-radius-large;
            background-color: $color-bg-light;
            .course-info {
                padding: 20rpx;
                .course-name {
                    width: 414rpx;
                    color: $color-text-deep;
                    font-size: $font-size-md;
                }
            }
        }
        .reply {
            padding: 24rpx 20rpx;
            background-color: $color-bg-light;
            border-radius: $border-radius-large;
        }
    }
}
</style>
